<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "/jquery-3.3.1.min.js"></script>
</head>
<body>

    <img class="song-albumImg" th:src = "${song.albumImg}" />

    <h1 class="song-name" th:text = "${song.name}" />

    <a herf = "#" th:data-id="${song.id}" class = "player-btn">播放</a>
    <audio id = "player" style = "display: none;" src = "" controls = "controls"></audio>
    <h3>
        <label>歌手:</label><span class="song-singer" th:text = "${song.singer}"/>
    </h3>
    <h3>
        <label>专辑名称：</label><span class="song-albumName" th:text = "${song.albumName}"/>
    </h3>
    <h3>
        <label>评论数：</label><span class="song-commentCount" th:text = "${song.commentCount}"/>
    </h3>

    <h3>相似歌曲</h3>
    <ul>
        <li>
            <a herf = "#" class="change-song" data-id="16435049">Someone Like You</a>
            <a herf = "#" class="player-btn" data-id="16435049">播放</a>
        </li>
    </ul>
    <h1>评论</h1>
    <form action = "comment/post" method = "post">
        <input type = "hidden" name = "nickName" value = "bmatch">
        <input type = "hidden" name = "songId" value = "35847388"/>
        <input name = "content" type = "text" style = "width:80%; height:100px;" placeholder="填写你的评论"/>
        <br/>
        <button type = "summit">评论</button>
    </form>
    <h3>精彩评论</h3>
    <ul th:each="comment:${comments}">
        <li>
            <img th:src=${comment.icon}/>
            <span th:text="${comment.nickName}"></span>
            <span th:text="${comment.content}"></span>
        </li>

        <li>
            <label>评论时间</label>
            <span th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd HH:mm:ss')}"></span>
            <label>点赞数</label>
            <a href = "#" th:data-id="${comment.id}" class = "like-btn">
                <span th:text="${comment.likeNum}"></span></a>
        </li>
    </ul>
    <script>

        $(function(){
            $(".player-btn").on('click', function(e){
                e.preventDefault();
                var songId = $(this).data("id");

                $.ajax({
                    url: "/song/music",
                    method: "GET",
                    data:{
                        songId: songId
                    },
                    cache: false
                })
                    .done(function (data){
                        $("#player").show();
                        $("#player").attr("src", data);
                        document.getElementById("player").play();
                    });
                });
            $(".change-song").on('click',function(e){
                e.preventDefault();
                var songId = $(this).data("id");
                $.ajax({
                    url :"songinfo/get",
                    method: "GET",
                    data: {
                        songId: songId
                    },
                    cache: false
                })
                    .done(function(data){
                        $('.song-albumImg').attr('src',data.albumImg);
                        $('.song-albumName').html(data.albumName);
                        $('.song-commentCount').html(data.commentCount);
                        $('.song-name').html(data.name);
                        $('.song-singer').html(data.singer);

                    });
                })
            });
    </script>
</body>
</html>